@use 'sass:meta';
@use 'sass:map';

/* #ifdef WEB || MP */
@for $i from 1 through 5 {
   .uvx-line-#{$i} {
      @if $i == '1' {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
      } @else {
         display: -webkit-box !important;
         overflow: hidden;
         text-overflow: ellipsis;
         word-break: break-all;
         -webkit-line-clamp: $i;
         -webkit-box-orient: vertical !important;
      }
   }
}
/* #endif */

/* #ifdef APP */
@for $i from 1 through 5 {
   .uvx-line-#{$i} {
      overflow: hidden;
      text-overflow: ellipsis;
      @if $i == '1' {
         white-space: nowrap;
      }
   }
}
/* #endif */

$border-directions: (
   '': (
      'width': 'border-width',
      'style': 'border-style',
   ),
   '-top': (
      'width': 'border-top-width',
      'style': 'border-top-style',
   ),
   '-left': (
      'width': 'border-left-width',
      'style': 'border-left-style',
   ),
   '-right': (
      'width': 'border-right-width',
      'style': 'border-right-style',
   ),
   '-bottom': (
      'width': 'border-bottom-width',
      'style': 'border-bottom-style',
   ),
);

@each $direction, $props in $border-directions {
   .uvx-border#{$direction} {
      #{map.get($props, 'width')}: 0.5px !important;
      border-color: $uvx-border-light !important;
      #{map.get($props, 'style')}: solid;
   }
}

.uvx-border-top-bottom {
   border-top-width: 0.5px !important;
   border-bottom-width: 0.5px !important;
   border-color: $uvx-border-light !important;
   border-top-style: solid;
   border-bottom-style: solid;
}

// 去除button的所有默认样式
.uvx-reset-button {
   padding: 0;
   background-color: transparent;
   /* #ifdef WEB || MP */
   border: none;
   outline: none;
   font-size: inherit;
   line-height: inherit;
   color: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-tap-highlight-color: transparent;
   /* #endif */
   /* #ifdef APP */
   border-width: 0;
   /* #endif */
}

/* #ifdef WEB || MP */
.uvx-reset-button::after {
   border: none !important;
}
/* #endif */

.uvx-hover-class {
   opacity: 0.7;
}